<template>
  <div id="zb_app">
    <!-- 头部 -->
    <header>
      <!-- LE购 -->
      <img src="@/assets/img/le购.png" alt />
      <!-- 搜索框 -->
      <van-search v-model="keyword" placeholder="请输入要搜索的商品"  @click="$router.push('/searchList')"/>
    </header>
    <!-- 主要区域 -->
    <section>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in zb_banner" :key="index">
          <img v-lazy="item.slide_show_imgUrl" />
        </van-swipe-item>
      </van-swipe>
      <!-- grid宫格 -->
      <van-grid>
        <van-grid-item
          :icon="item.sp_home_ico"
          :text="item.sp_home_title"
          v-for="(item,index) in zb_grid"
          :key="index"
        />
      </van-grid>
      <!-- tabs标签页 -->
      <div class="zb_box" ref="box_height">
        <van-tabs v-model="activeName">
          <!-- 流行 -->
          <van-tab title="流行" name="a">
            <ul class="zb_goods">
              <router-link
                :to="'/detail?id='+item.goodsId"
                tag="li"
                v-for="(item,index) in zb_goodsList"
                :key="index"
              >
                <img v-lazy="item.goodsLogo" />
                <div class="goods-num">已售{{item.goodsBuyNum | sellCountFilter }}件</div>
                <div class="goods-name">{{item.goodsName}}</div>
                <div class="goods-price">
                  <span style="color:red;">￥{{item.goodsPrice}}</span>
                  <span style="color:#999;">☆{{item.goodsFav}}</span>
                </div>
                <div class="old-price">
                  <span>{{item.goodsOldPrice}}</span>
                  <!-- 弹出层 -->
                  <van-icon
                    name="cart-o"
                    color="#1989fa"
                    class="zb_icon"
                    @click.stop="zb_showCart(item)"
                  />
                  <!-- 弹出层 -->
                </div>
              </router-link>
            </ul>
          </van-tab>
          <!-- 新款 -->
          <van-tab title="新款" name="b">
            <ul class="zb_goods">
              <router-link
                :to="'/detail?id='+item.goodsId"
                tag="li"
                v-for="(item,index) in zb_goodsList1"
                :key="index"
              >
                <img v-lazy="item.goodsLogo" />
                <div class="goods-num">已售{{item.goodsBuyNum | sellCountFilter }}件</div>
                <div class="goods-name">{{item.goodsName}}</div>
                <div class="goods-price">
                  <span style="color:red;">￥{{item.goodsPrice}}</span>
                  <span style="color:#999;">☆{{item.goodsFav}}</span>
                </div>
                <div class="old-price">
                  <span>{{item.goodsOldPrice}}</span>
                  <!-- 弹出层 -->
                  <van-icon
                    name="cart-o"
                    color="#1989fa"
                    class="zb_icon"
                    @click.stop="zb_showCart(item)"
                  />
                  <!-- 弹出层 -->
                </div>
              </router-link>
            </ul>
          </van-tab>
          <!-- 精选 -->
          <van-tab title="精选" name="c">
            <ul class="zb_goods">
              <router-link
                :to="'/detail?id='+item.goodsId"
                tag="li"
                v-for="(item,index) in zb_goodsList2"
                :key="index"
              >
                <img v-lazy="item.goodsLogo" />
                <div class="goods-num">已售{{item.goodsBuyNum | sellCountFilter }}件</div>
                <div class="goods-name">{{item.goodsName}}</div>
                <div class="goods-price">
                  <span style="color:red;">￥{{item.goodsPrice}}</span>
                  <span style="color:#999;">☆{{item.goodsFav}}</span>
                </div>
                <div class="old-price">
                  <span>{{item.goodsOldPrice}}</span>
                  <!-- 弹出层 -->
                  <van-icon
                    name="cart-o"
                    color="#1989fa"
                    class="zb_icon"
                    @click.stop="zb_showCart(item)"
                  />
                  <!-- 弹出层 -->
                </div>
              </router-link>
            </ul>
          </van-tab>
        </van-tabs>
        <!-- 弹出层框 显示-->
        <van-popup v-model="zb_show" position="bottom" :style="{ height: '50%' }">
          <div class="zb_info">
            <img v-lazy="zb_info.goodsLogo" />
            <p>名称：{{zb_info.goodsName}}</p>
            <p>价格：￥{{zb_info.goodsPrice}}</p>
            <p>数量：1</p>
            <van-button
              type="primary"
              block
              style="margin-top:30px;"
              @click="zb_addCart(zb_info)"
            >加入购物车</van-button>
          </div>
        </van-popup>
      </div>
    </section>
    <!-- 底部loadging加载 -->
    <div class="box_footer_loadging" v-show="isShow">
      <img
        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3681478079,2138136230&fm=26&gp=0.jpg"
        alt
      />
    </div>
  </div>
</template>

<script>
//引入轻提示
import { Toast } from "vant";
//引入Dialog
import { Dialog } from "vant";
//引入懒加载
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      keyword: "", //搜索关键字
      zb_banner: [], //轮播图 数据源
      zb_grid: [], //九宫格 数据源
      activeName: "a", //tab 标签页 高亮
      zb_goodsList: [], //商品列表 数据源
      zb_goodsList1: [], //商品列表 数据源
      zb_goodsList2: [], //商品列表 数据源
      isShow: false, //加载图
      zb_show: false, //弹出层控制开口
      zb_info: [] //弹出层赋值的新数据源
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //弹出层
    zb_showCart(obj) {
      this.zb_show = true; //弹出层显示
      this.zb_info = obj; //赋值
    },
    //添加商品到购物车
    zb_addCart() {
      //如果登陆了 商品添加到购物车 如果没登陆 提示用户先登陆
      if (!this.$store.state.token) {
        //添加商品到购物车
        Dialog.alert({
          message: "请先登陆"
        }).then(() => {
          this.$router.push("/login");
        });
        return false;
      }
       //如果登陆了就应该加入购物车 然后跳转到购物车页面
      var zb_obj = {
        id: this.zb_info.goodsId,
        title: this.zb_info.goodsName,
        number: 1,
        pic: this.zb_info.goodsLogo,
        price: this.zb_info.goodsPrice,
        num: 100
      };
         //购物车中是否存在商品
      var zb_cart = this.$store.state.zb_cart;
      var zb_index = zb_cart.findIndex((item, index) => {
        return item.id == zb_obj.id;
      });
       if (zb_index == -1) {
        this.$store.commit("zb_addCart", zb_obj);
      } else {
        this.$store.commit("zb_addNum", zb_index);
      }
      //添加成功
      Toast.success("加入购物车成功");
      //关闭
      this.zb_show = false;
    }
  },
  //进行数据的处理
  filters: {
    sellCountFilter(value) {
      let rselt = value;
      if (value > 10000) {
        rselt = (rselt / 10000).toFixed(1) + "万";
      }
      return rselt;
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    //获取九宫格和轮播图数据
    this.$axios
      .get("http://www.hj0819.top:44369/api/Home/getHomeREC")
      .then(res => {
        // console.log(res);
        this.zb_banner = res.data.data[1];
        this.zb_grid = res.data.data[0];
      });
    //获取商品列表数据
    this.$axios
      .get(
        "http://www.hj0819.top:44369/api/Home/getHomeShowGoods?page=1&sortType=syn"
      )
      .then(res => {
        // console.log(res);
        this.zb_goodsList = res.data.data;
      });
    //获取商品列表数据1
    this.$axios
      .get(
        "http://www.hj0819.top:44369/api/Home/getHomeShowGoods?page=1&sortType=new"
      )
      .then(res => {
        // console.log(res);
        this.zb_goodsList1 = res.data.data;
      });
    //获取商品列表数据2
    this.$axios
      .get(
        "http://www.hj0819.top:44369/api/Home/getHomeShowGoods?page=1&sortType=sell"
      )
      .then(res => {
        // console.log(res);
        this.zb_goodsList2 = res.data.data;
      });
    //下拉加载
    this.$refs.box_height.addEventListener("scroll", () => {
      var clientHeight = document.documentElement.clientHeight;
      var scrollTop = document.documentElement.scrollTop;
      var scrollHeight = document.documentElement.scrollHeight;
      if (scrollHeight - scrollTop - clientHeight < 1) {
        this.isShow = true;
        window.setTimeout(() => {
          this.$axios
            .get("http://www.hj0819.top:44369/api/Home/getHomeShowGoods")
            .then(res => {
              this.zb_goodsList = [...this.zb_goodsList, ...res.data.data];
              this.zb_goodsList1 = [...this.zb_goodsList1, ...res.data.data];
              this.zb_goodsList2 = [...this.zb_goodsList2, ...res.data.data];
            });
          this.isShow = false;
        }, 5000);
      }
    });
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
#zb_app {
  width: 100%;
  height: 100%;
  //头部
  header {
    width: 100%;
    height: 100px;
    // le购
    img {
      width: 100%;
      height: 60px;
    }
    //搜索框
    .van-search {
      height: 40px;
      width: 100%;
      border: 1px solid #999;
      border-radius: 2px;
    }
  }
  //主要区域
  section {
    width: 100%;
    height: 2000px;
    //轮播图
    .van-swipe {
      width: 100%;
      height: 200px;
      img {
        width: 100%;
        height: 200px;
      }
    }
    //商品列表
    .zb_goods {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 49%;
        height: 200px;
        padding: 5px;
        position: relative;
        img {
          width: 100%;
          height: 130px;
          border-radius: 5px;
        }
        .goods-name {
          width: 100%;
          height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
        }
        .goods-num {
          width: 80px;
          font-size: 14px;
          border-radius: 2px;
          color: white;
          background: rgba(30, 30, 30, 0.6);
          position: absolute;
          top: 120px;
          z-index: 3;
        }
        .goods-price {
          display: flex;
          justify-content: space-around;
        }
        .old-price {
          text-decoration: line-through;
          font-size: 10px;
          margin-left: 5px;
          color: #9999;
        }
      }
    }
  }
  //底部loadging加载
  .box_footer_loadging {
    width: 100%;
    height: 100px;
  }
  .box_footer_loadging img {
    width: 100px;
    height: 100px;
    margin-left: 45%;
  }
}
//滚动盒子
.zb_box {
  width: 100%;
  height: 1000px;
  overflow: scroll;
}
//弹出层
.zb_icon {
  float: right;
  margin-top: 3px;
}
</style>
